{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>问答详情</title>
<style type="text/css">
    .mui-content{ padding: 12px 0 12px 0; background-color: #fff;}
    .mui-grid-view.mui-grid-9:before{height: 1px;}
    .mui-slider-indicator{text-align: left;}
    .mui-pull-right{color: #999;}
    .bbs-replay-more{color:#999;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <!--问题标题-->
    <h4 class="mb-info-tit">{{data.title}}</h4>

    <!--问题详情-->
    <div class="mb-cont bbs-conts" style="word-break: break-all;">
        　　{{data.content}}
    </div>
    <!--回答列表-->

    <div class="mb-comment">
        <div class="bbs-replay-tit">
            共{{comment.totalCount}}条回答
            <div class="mui-pull-right">
                {%if data.collectionId == ''%}
                <a class="bbs-replay-more" href="javascript:void(0);"><i data-id="{{data.id}}" onclick="js_yes(this)" class="iconfont icon-shoucang"></i></a>
                {%else%}
                <a class="bbs-replay-more"  href="javascript:void(0);"><i data-id="{{data.collectionId}}" style="color:red;" onclick="js_del(this)" class="iconfont icon-yishoucang" data-cid="{{data.collectionId}}"></i></a>
                {%endif%}
            </div>
        </div>
        <!--回答循环主体开始-->
        {%for item in comment.list%}
        <div class="mb-comment-list">
            <div class="mb-comment-nick mui-clearfix">
                <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                <div class="mb-nick-name mui-pull-left">
                    <b class="mb-nickname mui-ellipsis">{{item.name}}</b>
                    <p class="mb-arr-time">{{item.createDate}}</p>
                </div>
            </div>
            <div class="mb-comment-cont">
                <a href="javascript:void(0);" onclick="js_button(this)" data-name="{{item.name}}" data-id="{{item.id}}" data-cid="{{item.objectId}}" data-type="{{item.roleType}}">{{item.content}}</a>
                <div class="bbs-replay-list">
                    <a class="bbs-replay-more" href="postreplaylist?id={{item.id}}"><i class="iconfont icon-xiaoxi"></i>{{item.topicCount}}</a>
                    {%if item.likeId%}
                    <a class="bbs-replay-more" style="color:#ff6f3b" href="javascript:void(0);" onclick="js_nozan(this)" data-id="{{item.likeId}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                    {%else%}
                    <a class="bbs-replay-more" href="javascript:void(0);" onclick="js_commentzan(this)" data-id="{{item.id}}"><i class="iconfont icon-zan"></i> {{item.postLikeCount}}</a>
                    {%endif%}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!--发帖子、提问-->
<nav class="mui-bar mui-bar-tab mb-subject-tab">
    <a class="mui-tab-item1" href="javascript:void(0)" onclick="">
        <span class="mui-tab-label">我要回答</span>
    </a>
</nav>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/like.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    const id = location.search.substr(4);

    mui(".mui-tab-item1").on('tap','.mui-tab-label',function(){
        mui.prompt('请填写回答','回答内容','回答',['关闭','回答'],function(e){
            if(e.index==1){
                mui.post('/postdetail', {
                    forumPostId: id,
                    content: e.value,
                    },function(data){
                        if(data.code!=200){
                            mui.toast(data.message);
                        }else{
                            mui.toast('回答成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回答结束');
            }
        })
    })

    function js_button(e){
        var id = $(e).context['dataset']['id'];
        var cid = $(e).context['dataset']['cid'];
        var type = $(e).context['dataset']['type'];
        var msg = '对'+$(e).context['dataset']['name']+'说...';
        mui.prompt('请填写回评',msg,'回评',['关闭','回评'],function(e){
            if(e.index==1){
                mui.post('/towreviewsend', {
                        commentPostId:id,
                        repliesTopicObjectId:cid,
                        repliesRoleType:type,
                        content:e.value,
                        sign:'1',
                    },function(data){
                        if(data.code!=200){
                            mui.toast(data.message);
                        }else{
                            mui.toast('回评成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回评结束');
            }
        })
    }


    function js_yes(e){
        var id = $(e).context['dataset']['id'];
        mui.post('/setcollect', {
                type:3,
                domainId:id,
            },function(data){
                if(data.code!=200){
                    // mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-yishoucang", onclick: "js_del(this)",style:"color:red;" });
                    $(e).context['dataset']['cid'] = data.data;
                    // mui.toast('关注成功');
                }
            },'json'
        );
    }

    function js_del(e){
        var id = $(e).context['dataset']['cid'];
        mui.post('/delcollect', {
                collectionIds:id,
            },function(data){
                if(data.code!=200){
                    // mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-shoucang", onclick: "js_yes(this)",style:"color:#999;" });
                    // mui.toast('取消关注');
                }
            },'json'
        );
    }


    function js_commentzan(e){
        let url = $(e).context['dataset']['id'];
        mui.post('/clicklike', {
                type:2,
                domainId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-shoucang", onclick: "js_yes(this)",style:"color:#ff6f3b;" });
                    mui.toast('点赞成功!');
                }
            },'json'
        );
    }

    function js_zan(e){
        let url = (window.location.search).substr(4);
        mui.post('/clicklike', {
                type:1,
                domainId:url
            },function(data){
                if(data.code!=200){
                    mui.toast(data.message);
                }else{
                    $(e).attr({ class: "iconfont icon-shoucang", onclick: "js_yes(this)",style:"color:#ff6f3b;" });
                    mui.toast('点赞成功!');
                }
            },'json'
        );
    }

</script>
<!--flotdemo-->
{% endblock %}
